<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/bootstrap.min.css"/>
		<script src="jqueryUI/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap-3.3.7-dist/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			button{
				width: 150px;
				height: 35px;
				line-height: 30px;
				font-size: 16px;
				margin: 50px 100px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<button type="button">获取数据方式1</button>
			<button type="button">获取数据方式2</button>
		</div>
		
		<div class="container table-responsive">
			<table class="table table-bordered table-striped table-hover">
			  <thead>
				  <tr>
					  <td>id</td>
					  <td>name</td>
					  <td>price</td>
					  <td>num</td>
				  </tr>
			  </thead>
			  
			  <tbody></tbody>
			</table>
		</div>
		
		<script type="text/javascript">
			// 后端接口需要时间，如果前端逻辑需要数据，但是接口还没完成
			
			$('button:first').on('click', function () {
				$("tbody").empty();
				// 获取数据方式1, json文件
					// 对于一些简单的数据接口前端可以自己写json文件
				$.get("./info.json", function (resp) {
					const { list } =  resp.body 
					console.log( list )
					var html = '';
					if(resp.code === 200){
						 list.forEach( ( item ) => {
							html += `
							<tr>
							  <td>${ item.id }</td>
							  <td>${item.name}</td>
							  <td>${item.price}</td>
							  <td>${item.num}</td>
							</tr>
							`
						})
						$('tbody').html(html)
					}
				})
			})
			
			
			var hasImg = false;
			$('button:last').on('click', function () {
				
				$('tbody').empty();
				
				// 获取数据方式2
				const url = "http://rap2.taobao.org:38080/app/mock/263891";
				var html = '';
				$.get( url + "/api/info/get", function (resp) {
					
					var { list } =  resp.body;
					if(resp.code === 200){
						list.forEach( (item,index) => {
							
							html = `
								  <td>${item.id}</td>
								  <td>${item.name}</td>
								  <td>${item.price}</td>
								  <td>${item.num}</td>
							`;
							
							$("<tr>").html(html).appendTo($("tbody"));
							
							console.log(item,index)
							
							$("<img>").attr("src", item.img).appendTo($("tbody tr").eq(index));
							
						})
						if( !hasImg ){
							hasImg = true;
							$("<td>").html('图片').appendTo("thead tr");
						}
					}
				})
			})
			
		</script>
		
		
	</body>
</html>
